<template>
    <div class="parent">
        <listCont @selectItem="selectItem"></listCont>
        <listCont :is="currentTab" @closeList="closeContent"></listCont>
        <div class="parentBar">
            <div class="item" @click="report('reconstruction')">
                <text class="iconBar" :style="{fontFamily: 'wxcIconFont'}" :class="[this.active('reconstruction')]">{{'\ue625'}}</text>
                <text class="textBar" :class="[this.active('reconstruction')]">改建补助统计</text>
                <!-- <text class="iconBar" :style="{fontFamily: 'wxcIconFont'}">{{'\ue71d'}}</text>
                <text class="textBar">{{item.TITLE}}</text> -->
            </div>
            <div class="item" @click="report('capital')">
                <text class="iconBar" :style="{fontFamily: 'wxcIconFont'}" :class="[this.active('capital')]">{{'\ue6d1'}}</text>
                <text class="textBar" :class="[this.active('capital')]">管护资金统计</text>
            </div>
        </div>
    </div>
</template>
<script>
import reconstruction from './reconstruction'
import capital from './capital'
import { addIconFontSupport } from '../../config/iconConfig.js'
import { getCache } from '../../util/storageUtils.js'
import { CTCE_DATALIST } from '../../config/storageTypes.js'
const dom = weex.requireModule('dom')
const modal = weex.requireModule('modal')
export default {
    name: 'living',
    data () {
        return {
            currentTab: 'reconstruction',
            activeText: 'reconstruction',
            datalist: []
        }
    },
    components: {
        reconstruction,
        capital
    },
    beforeCreate () {
        addIconFontSupport(dom, "../../")
        this.$navigator.setLeftItem({
            text: '   ',
            fontSize: '40',
            fontWeight: 'bold'
        }, () => {
            this.$router.back()
        })
    },
    created () {
        
    },
    methods: {
        active (key) {
            return this.activeText === key ? 'activeText' : ''
        },
        report (key) {
            switch (key) {
                case 'reconstruction': // 改建补助
                    this.activeText = key
                    this.currentTab = key;
                break;
                case 'capital': // 管护资金
                    this.activeText = key
                    this.currentTab = key;
                break
            }
        }
    }
}
</script>
<style scoped>
.parentBar{
    position: absolute;
    bottom: 0;
    width: 750px;
    height: 98px;
    background-color: rgba(255,255,255,1);
    padding: 0 20px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-top-color: #bbb;
    border-top-width: 1px;
    border-top-style: solid;
}
.item{
    width: 355px;
    height: 98px;
    justify-content: center;
    align-items: center;
}
.iconBar{
  font-size: 44px;
  color: rgba(151,151,151,1);
  /* color: rgba(74,182,128,1); */
  /* padding-right: 10px; */
}
.textBar{
    font-size:20px;
    font-family:PingFangSC-Regular;
    /* color:rgba(74,182,128,1); */
    color: rgba(151,151,151,1);
    margin-top: 5px;
}
.activeText {
    color:rgba(35,196,160,1);
}
</style>
